<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <title>行程详情</title>
        <link rel="stylesheet" href="__CDN__/qz/assets/frozenui-1.3.0/css/frozen.css">
        <link rel="stylesheet" type="text/css" href="__CDN__/qz/assets/css/style.css" />
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0Kqr2SMdguCrGLsMIPVLU457GLHEPgre"></script>
        <style type="text/css">
            .choosed{
                background-color: #4c67ea;
            }
        </style>
    </head>

    <body>
        <div id="map" >
            调用地图api
        </div>
        {volist name="travel.schedule" id="vo" key="k"}
        <section>
            <div class="day1">
                <i class="round round1"></i>
                <span><b>Day {$vo.days}</b></span>
                <span class="marginL39">{$key}</span>
                <span class="floatR"><img src="__CDN__/qz/assets/img/icon_map_27.png" class="icon_map"/></span>
            </div>
            {volist name="vo.activties" id="ac"}
            <div class="tap tap1 body">
                <div class="row2_">
                    <i class="mark">{$ac.category_abbr}</i>
                </div>
                <div class="row8_">
                    <p class="text_detail">{$ac.name}</p>
                    <p>
                        <span class="zhushi">距离下一站{$ac.distance}</span>
                        <a href="javascript:;" class="click_page" id="click{$k}"><img class="rotate" src="__CDN__/qz/assets/img/icon_up_blue.png" /><span>展开</span></a>
                    </p>
                </div> 
                <div style="clear: left;"></div> 
                <div class="ban1 ban detail_ban{$k}">
                    <section class="marginT40">
                        <h4>活动流程</h4>
                        <div>
                        {if $type == 0}
                            {volist name="ac.plan" id="vo"}
                            <ul class="ui-row ui-whitespace">
                                <li class="ui-col ui-col-33 paddingR textAR fontS14 color696969 marginT20">
                                    <label class="ui-label">{$vo.time}</label>
                                </li>
                                <li class="ui-col ui-col-67 textAL fontS14 color565656 lineH28 marginT20">{$vo.body}</li>
                            </ul>
                            {/volist}
                        {else /}
                            {$ac.plan}
                        {/if}
                        </div>
                    </section>  
                    <section class="tripDescription marginT40">
                        <h4>活动描述</h4>
                        <div class="marginT20">
                        {if $type == 0}
                            {volist name="ac.desc" id="vo"}
                                {if $vo.type == 'img'}
                                    <img src="{$vo.body}" class="img marginT15" />
                                {else /}
                                    <p class="marginT18 color565656 lineH28">{$vo.body}</p>
                                {/if}
                            {/volist}
                        {else /}
                            {$ac.desc}
                        {/if}
                        </div>
                    </section>  
                    {if $type == 0}
                    <section class="tripDescription marginT40">
                        <h4>费用包含</h4>
                        <div class="marginT20">
                            {$ac.include}
                        </div>
                    </section>
                    {/if}
                    <section class="tripDescription marginT40 marginB25">
                        <h4>活动须知</h4>
                        <div class="marginT20">
                            {$ac.notes}
                        </div>
                    </section> 
                </div>
            </div>
            {/volist}
            </section>
        {/volist}
        <section>
            <div class="day1 backgroundCT">
                <i class="round dayTop"></i>
                <span>THE END</span>
            </div>
        </section>
        {if $travel.other}
        <div class="tap body">
            {volist name="travel.other" id="o"}
            <div class="row2_" id="chooseOther">
                <img id="chooseImg" src="__CDN__/qz/assets/img/icon_weixuan.png" class="mark marginT4 width15" style="display: inline-block;" />
            </div>
            <div class="row8_">
                <h2>{$o.name}<span class="money_yi floatR">¥{$o.fee}</span></h2>
                <p class="marginT15">
                    <span class="zhushi">{$o.notes}</span>
                </p>
            </div> 
            <div style="clear: left;"></div> 
            {/volist} 
        </div>
        {/if}
        <div class="tap body say">
            <p class="">
                <span class="zhushi color969696">活动说明</span>
            </p>
            <p class="say_detail">{$travel.desc}</p>
        </div>
        {if $travel.signuplist}
        <div class="tap body say marginB70">
            <h2>报名名单</h2>
            <ul id="signUp" class="marginT15 marginB25">
                {volist name="travel.signuplist" id="u"}
                <li>
                    <img src="{$u.avatar}" />
                    <span>{$u.name}</span>
                    <span class="floatR">{$u.mobile}</span>
                </li>
                {/volist}
            </ul>
        </div>
        {/if}
        <footer class="footer">
          <a href="javascript:;" class="row2 textAC money_yi">票价：¥{$travel.memebr_price}</a>
          <a href="javascript:;" class="row2 textAC baomin">立刻报名</a>
        </footer>
        <script type="text/javascript" src="__CDN__/qz/assets/js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="__CDN__/qz/assets/js/script.js"></script>
        <script type="text/javascript">
            var is_signup = {$is_signup};
            $(document).ready(function(){
                if(is_signup)
                {
                    $('.footer').show();
                }
               $("#chooseOther").click(function(){
                    //$("#chooseImg").toggle();
                    var chooseOrHide = $("#chooseImg").css("background-color");
                    console.log(chooseOrHide);
                    if(chooseOrHide == 'rgb(76, 103, 234)'){
                        $(this).find('img').removeClass('choosed');
                    }else{
                        $(this).find('img').addClass('choosed');
                    }
                });
                $('.click_page').each(function(i){
                    var index = i+1;
                    $("#click"+index).click(function(){
                        $(".detail_ban"+index).toggle();
                        console.log()
                        var showOrHide = $(".detail_ban"+index).css("display");
                        if(showOrHide=='none'){
                            $(this).find('span').text('展开');
                            $(this).find('img').addClass('rotate');
                        }else{
                            $(this).find('span').text('收起');
                            $(this).find('img').removeClass('rotate');
                        }
                        
                    });
                })
            });
        </script>
        <script type="text/javascript">
            var arr = {$maps};
            console.log(arr[0]);
            var map = new BMap.Map("map"); // 创建Map实例
            // map.centerAndZoom("中国",10);  
            for(j = 0,len=arr.length; j < len; j++) {
                var point = new BMap.Point(arr[j]['lon'],arr[j]['lat']);
                map.centerAndZoom(point, 5);
                var marker = new BMap.Marker(point);  // 创建标注
                map.addOverlay(marker);               // 将标注添加到地图中
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            }

            function showInfo(e){
                alert('click map,与原生交互');
            }
            map.addEventListener("click", showInfo);
        </script>
        <script type="text/javascript">
         function signUp(){
            var u = navigator.userAgent, app = navigator.appVersion;
            if(u.indexOf('Android') > -1 || u.indexOf('Adr') > -1){
                window.WebViewJavascriptBridge.callHandler(
                    'signUpFromWeb'
                    , {'param': choose_other} 
                    , function(responseData) {
                        // document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
                    }
                );
            }else{
                window.webkit.messageHandlers.signUpFromWeb.postMessage({body: choose_other}); 
            }
        }

        function map()
        {
            var u = navigator.userAgent, app = navigator.appVersion;
            if(u.indexOf('Android') > -1 || u.indexOf('Adr') > -1){
                window.WebViewJavascriptBridge.callHandler(
                    'mapFromWeb'
                    , {'param': ''} 
                    , function(responseData) {
                        // document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
                    }
                );
            }else{
                window.webkit.messageHandlers.mapFromWeb.postMessage({body: choose_other}); 
            }
        }
       
        </script>
    </body>
</html>